"use client";
import React, { useState } from 'react';
import PageContainer from '../components/PageContainer';
import Divider from '../divider/components/Divider';
import Button, { ButtonSize, ButtonType } from './components/Button';
import Cell from '../flex/components/Cell';
import { FaCamera } from "react-icons/fa";
import { FaAngleDown } from "react-icons/fa";
import { FaCaretSquareLeft } from "react-icons/fa";
import { MdDeleteForever } from "react-icons/md";
import ButtonGroup from './components/ButtonGroup';
import FlexRow from '../flex/components/FlexRow';
import CodeSandBox from '../components/CodeSandBox';
import FloatButton from '../floatbutton/components/FloatButton';
import { MdVerticalAlignTop } from "react-icons/md";




const Page = () => {
    const [isLoading, setIsLoading] = useState(false);
    const [showToTop, setShowToTop] = useState(false);
    const types = [['primary', '主要'], ['secondary', '次要'], ['tertiary', '第三'], ['warning', '警告'], ['danger', '危险']];
    const handleScroll = (e?: React.UIEvent) => {
        console.log((e!.target as HTMLElement).scrollTop);
        if ((e!.target as HTMLElement).scrollTop > 400) {
            setShowToTop(true);
        }
    };

    const handleBottonScroll = (e, itemId) => {
        e.preventDefault();
        const target = document.getElementById(itemId);
        if (target) {
            target.scrollIntoView({ behavior: 'smooth' });
        }
    };

    return (
        <PageContainer onScroll={handleScroll}>
            <button onClick={(e) => handleBottonScroll(e, "bottomAnchor")}>456</button>
            {showToTop && <FloatButton position='right-5 bottom-20' shape='circle' theme='solid' icon={<MdVerticalAlignTop />} ><a href='#bottomAnchor'></a></FloatButton>}
            <Button onClick={(e) => console.log(e)}>123</Button>
            <a href="#bottomAnchor">跳转到页面底部</a>
            <h1 className='font-douyin'>通用·Button</h1>
            <h2 className='font-douyin text-5xl'>按钮</h2>
            <p>用户使用按钮来触发一个操作或者进行跳转。</p>
            <Divider />
            <h3 className='text-3xl'>代码演示</h3>
            <h4 className='text-2xl'>按钮类型</h4>
            <ul className='ml-5'>
                {/* eslint-disable-next-line */}
                <li className='list-disc'>主按钮（"primary"，默认）</li>
                {/* eslint-disable-next-line */}
                <li className='list-disc'>次要按钮（"secondary"）</li>
                {/* eslint-disable-next-line */}
                <li className='list-disc'>第三按钮（"tertiary"）</li>
                {/* eslint-disable-next-line */}
                <li className='list-disc'>警告按钮（"warning"）</li>
                {/* eslint-disable-next-line */}
                <li className='list-disc'>危险按钮（"danger"）</li>
            </ul>

            <Cell>
                <FlexRow>
                    <Button type='primary' >主要按钮</Button>
                    <Button type='secondary' >次要按钮</Button>
                    <Button type='tertiary' >第三按钮</Button>
                    <Button type='warning' >警告按钮</Button>
                    <Button type='danger' >危险按钮</Button>
                </FlexRow>
                <CodeSandBox codeTitle='代码预览' readOnly height='auto' block previewCarde={false} inputCode={`<Button type='primary' >主要按钮</Button>
<Button type='secondary' >次要按钮</Button>
<Button type='tertiary' >第三按钮</Button>
<Button type='warning' >警告按钮</Button>
<Button type='danger' >危险按钮</Button>`} />

            </Cell>

            <h4 className='text-2xl'>关于类型字体色值</h4>
            <p>按钮的字体色值使用的都是 CSS Variables，分别为：</p>
            <ul className='ml-5'>
                <li className='list-disc'>var(--semi-color-primary)：主要</li>
                <li className='list-disc'>var(--semi-color-secondary)：次要</li>
                <li className='list-disc'>var(--semi-color-tertiary)：第三</li>
                <li className='list-disc'>var(--semi-color-warning)：警告</li>
                <li className='list-disc'>var(--semi-color-danger)：危险</li>
            </ul>
            <p>你可以直接使用这些主题色定义你的元素。</p>
            <Cell>
                <FlexRow >
                    {types.map((type, index) =>
                        <strong key={index} style={{ color: `var(--myTheme-color-${type[0]})` }}>{type[1]}</strong>
                    )}
                </FlexRow>
                <CodeSandBox codeTitle='代码预览' readOnly height='auto' block previewCarde={false} inputCode={`types.map((type, index) =>
<strong className='mx-2' key={index} style={{ color: var(--myTheme-color-type[0]) }}>{type[1]}</strong>)`} />
            </Cell>
            <h4>按钮主题</h4>
            <p>目前可用的主题（theme）为：</p>
            <ul>
                <li className='list-disc'>light：浅色背景模式(默认)</li>
                <li className='list-disc'>solid：深色背景模式</li>
                <li className='list-disc'>borderless：无背景模式</li>
                <li className='list-disc'>outline：边框模式</li>
            </ul>
            <h5>深色背景</h5>
            <Cell>
                <FlexRow>
                    <Button theme="solid" type='primary' >深色主要</Button>
                    <Button theme="solid" type='secondary' >深色次要</Button>
                    <Button theme="solid" type='tertiary' >深色第三</Button>
                    <Button theme="solid" type='warning' >深色警告</Button>
                    <Button theme="solid" type='danger' >深色危险</Button>
                </FlexRow>
                <CodeSandBox codeTitle='代码预览' readOnly height='auto' block previewCarde={false} inputCode={`<Button theme="solid" type='primary' >深色主要</Button>
<Button theme="solid" type='secondary' >深色次要</Button>
<Button theme="solid" type='tertiary' >深色第三</Button>
<Button theme="solid" type='warning' >深色警告</Button>
<Button theme="solid" type='danger' >深色危险</Button>`} />

            </Cell>
            <h5>浅色背景</h5>
            <Cell>
                <FlexRow>
                    <Button theme="light" type='primary' >浅色主要</Button>
                    <Button theme="light" type='secondary' >浅色次要</Button>
                    <Button theme="light" type='tertiary' >浅色第三</Button>
                    <Button theme="light" type='warning' >浅色警告</Button>
                    <Button theme="light" type='danger' >浅色危险</Button>
                </FlexRow>
                <CodeSandBox codeTitle='代码预览' readOnly height='auto' block previewCarde={false} inputCode={`<Button theme="light" type='primary' >浅色主要</Button>
<Button theme="light" type='secondary' >浅色次要</Button>
<Button theme="light" type='tertiary' >浅色第三</Button>
<Button theme="light" type='warning' >浅色警告</Button>
<Button theme="light" type='danger' >浅色危险</Button>`} />
            </Cell>

            <h5>无背景</h5>
            <Cell>
                <FlexRow>
                    <Button theme="borderless" type='primary' >主要</Button>
                    <Button theme="borderless" type='secondary' >次要</Button>
                    <Button theme="borderless" type='tertiary' >第三</Button>
                    <Button theme="borderless" type='warning' >警告</Button>
                    <Button theme="borderless" type='danger' >危险</Button>
                </FlexRow>
                <CodeSandBox codeTitle='代码预览' readOnly height='auto' block previewCarde={false} inputCode={`<Button theme="borderless" type='primary' >主要</Button>
<Button theme="borderless" type='secondary' >次要</Button>
<Button theme="borderless" type='tertiary' >第三</Button>
<Button theme="borderless" type='warning' >警告</Button>
<Button theme="borderless" type='danger' >危险</Button>`} />
            </Cell>
            <h5>边框模式</h5>
            <Cell>
                <FlexRow>{[
                    ["主要", "primary"],
                    ["次要", "secondary"],
                    ["第三", "tertiary"],
                    ["警告", "warning"],
                    ["危险", "danger"],
                ].map((type, index) =>
                    <Button theme="outline" type={type[1] as ButtonType} key={index} >{type[0]}</Button>
                )
                }
                </FlexRow>
                <FlexRow>{[
                    ["主要", "primary"],
                    ["次要", "secondary"],
                    ["第三", "tertiary"],
                    ["警告", "warning"],
                    ["危险", "danger"],
                ].map((type, index) =>
                    <Button theme="outline" borderStyle='dashed' type={type[1] as ButtonType} key={index} >{type[0]}</Button>
                )
                }
                </FlexRow>
                <FlexRow>{[
                    ["主要", "primary"],
                    ["次要", "secondary"],
                    ["第三", "tertiary"],
                    ["警告", "warning"],
                    ["危险", "danger"],
                ].map((type, index) =>
                    <Button theme="outline" borderStyle='dotted' type={type[1] as ButtonType} key={index} >{type[0]}</Button>
                )
                }
                </FlexRow>
                <CodeSandBox codeTitle='代码预览' readOnly height='auto' block previewCarde={false} inputCode={`//默认为solid
<Button theme="outline" type='primary' >主要</Button>
<Button theme="outline" type='secondary' >次要</Button>
<Button theme="outline" type='tertiary' >第三</Button>
<Button theme="outline" type='warning' >警告</Button>
<Button theme="outline" type='danger' >危险</Button>
//dashed
<Button theme="outline" borderStyle='dashed' type='primary' >主要</Button>
<Button theme="outline" borderStyle='dashed' type='secondary' >次要</Button>
<Button theme="outline" borderStyle='dashed' type='tertiary' >第三</Button>
<Button theme="outline" borderStyle='dashed' type='warning' >警告</Button>
<Button theme="outline" borderStyle='dashed' type='danger' >危险</Button>
//dotted
<Button theme="outline" borderStyle='dotted' type='primary' >主要</Button>
<Button theme="outline" borderStyle='dotted' type='secondary' >次要</Button>
<Button theme="outline" borderStyle='dotted' type='tertiary' >第三</Button>
<Button theme="outline" borderStyle='dotted' type='warning' >警告</Button>
<Button theme="outline" borderStyle='dotted' type='danger' >危险</Button>`} />

            </Cell>
            <h4>按钮主题</h4>
            <p>默认定义了三种尺寸：</p>
            <ul>
                {[`大："large"`, `中(默认)："medium"`, `小："small"`].map((type, index) =>
                    <li className='list-disc' key={index}>{type}</li>
                )}
            </ul>
            <Cell>
                <FlexRow className='items-center'>{[
                    ["大尺寸", "large"],
                    ["默认尺寸", "medium"],
                    ["小尺寸", "small"],
                ].map((type, index) =>
                    <Button size={type[1] as ButtonSize} key={index} >{type[0]}</Button>
                )}
                </FlexRow>
                <CodeSandBox codeTitle='代码预览' readOnly height='auto' block previewCarde={false} inputCode={`<Button size=large >大尺寸</Button>
<Button size=medium >默认尺寸</Button>
<Button size=small >小尺寸</Button>`} />
            </Cell>
            <h4>按钮主题</h4>
            <p>默认定义了三种尺寸：</p>
            <Cell>
                <FlexRow >{[
                    ["块级按钮", true],
                ].map((type, index) =>
                    <Button block key={index} >{type[0]}</Button>
                )}
                </FlexRow>
                <CodeSandBox codeTitle='代码预览' readOnly height='auto' block previewCarde={false} inputCode={`<Button block >大尺寸</Button>`} />
            </Cell>
            <h4>禁用按钮</h4>
            <Cell>
                <FlexRow>
                    <Button disabled>禁用</Button>
                    <Button disabled theme="borderless">无背景禁用</Button>
                    <Button disabled theme="light">浅色禁用</Button>
                    <Button disabled theme="outline" >边框模式禁用</Button>
                    <Button disabled theme="solid" >深色禁用</Button>
                </FlexRow>
                <CodeSandBox codeTitle='代码预览' readOnly height='auto' block previewCarde={false} inputCode={`<Button disabled>禁用</Button>
<Button disabled theme="borderless">无背景禁用</Button>
<Button disabled theme="light">浅色禁用</Button>
<Button disabled theme="outline" >边框模式禁用</Button>
<Button disabled theme="solid" >深色禁用</Button>`} />

            </Cell>

            <h4>图标按钮</h4>
            <p>可定义按钮的图标。</p>
            <Cell>
                <FlexRow style={{ alignItems: "center" }}  >
                    <p>默认状态:</p>
                    <Button icon={<FaCamera />} />
                </FlexRow>
                <CodeSandBox codeTitle='代码预览' readOnly height='auto' block previewCarde={false} inputCode={`<Button icon={<FaCamera />} />`} />
                <FlexRow style={{ alignItems: "center" }}  >
                    <p>圆形按钮:</p>
                    <Button picCircle icon={<FaCamera />} />
                </FlexRow>
                <CodeSandBox codeTitle='代码预览' readOnly height='auto' block previewCarde={false} inputCode={`<Button picCircle icon={<FaCamera />} />`} />
                <FlexRow style={{ alignItems: "center" }}  >
                    <p>禁用状态:</p>
                    <Button disabled icon={<FaCamera />} />
                </FlexRow>
                <CodeSandBox codeTitle='代码预览' readOnly height='auto' block previewCarde={false} inputCode={`<Button disabled icon={<FaCamera />} />`} />
                <FlexRow style={{ alignItems: "center" }}  >
                    <p>复合状态:</p>
                    {[
                        ["primary"],
                        ["secondary"],
                        ["tertiary"],
                        ["warning"],
                        ["danger"],
                    ].map((type, index) =>
                        <Button icon={<FaCamera />} type={type[0] as ButtonType} key={index} />
                    )}
                </FlexRow>
                <CodeSandBox codeTitle='代码预览' readOnly height='auto' block previewCarde={false} inputCode={`<Button icon={<FaCamera />} type='primary' />
<Button icon={<FaCamera />} type='secondary' />
<Button icon={<FaCamera />} type='tertiary' />
<Button icon={<FaCamera />} type='warning' />
<Button icon={<FaCamera />} type='danger' />`} />
                <FlexRow style={{ alignItems: "center" }} >
                    <p>改变主题:</p>
                    <Button theme='solid' icon={<FaCamera />} />
                    <Button icon={<FaCamera />} />
                    <Button theme='outline' icon={<FaCamera />} />
                    <Button picCircle theme='solid' icon={<FaCamera />} />
                    <Button picCircle icon={<FaCamera />} />
                    <Button picCircle theme='outline' icon={<FaCamera />} />
                </FlexRow>
                <CodeSandBox codeTitle='代码预览' readOnly height='auto' block previewCarde={false} inputCode={`<Button theme='solid' icon={<FaCamera />} />
<Button icon={<FaCamera />} />
<Button theme='outline' icon={<FaCamera />} />
<Button picCircle theme='solid' icon={<FaCamera />} />
<Button picCircle icon={<FaCamera />} />
<Button picCircle theme='outline' icon={<FaCamera />} />`} />
                <FlexRow style={{ alignItems: "center" }} >
                    <p>改变图标位置(默认为左侧)：</p>
                    <Button icon={<FaCaretSquareLeft />} >收起</Button>
                    <Button picposition='right' icon={<FaAngleDown />} >展开选项</Button>
                </FlexRow>
                <CodeSandBox codeTitle='代码预览' readOnly height='auto' block previewCarde={false} inputCode={`<Button icon={<FaCaretSquareLeft />} >收起</Button>
<Button picposition='right' icon={<FaAngleDown />} >展开选项</Button>`} />

            </Cell>



            <h4>加载状态</h4>
            <p>按钮支持加载状态，通过设置 loading 参数值为 true 即可，注意：disabled 状态优先级高于 loading 状态。</p>
            <Cell>
                <FlexRow>
                    <Button onClick={() => setIsLoading(true)}>开启加载状态</Button>
                    <Button onClick={() => setIsLoading(false)} >关闭加载状态</Button>
                </FlexRow>
                <FlexRow >
                    <Button isLoading={isLoading} >保存</Button>
                    <Button isLoading={isLoading} icon={<MdDeleteForever />} type="danger">删除</Button>
                    <Button isLoading={isLoading} type="warning" theme='solid'>撤销</Button>
                    <Button isLoading type="tertiary" theme='solid'>加载中</Button>
                </FlexRow>
                <CodeSandBox codeTitle='代码预览' readOnly height='auto' block previewCarde={false} inputCode={`const [isLoading, setIsLoading] = useState(false);
<FlexRow>
     <Button onClick={() => setIsLoading(true)}>开启加载状态</Button>
     <Button onClick={() => setIsLoading(false)} >关闭加载状态</Button>
</FlexRow>
<FlexRow >
     <Button isLoading={isLoading} >保存</Button>
     <Button isLoading={isLoading} icon={<MdDeleteForever />} type="danger">删除</Button>
     <Button isLoading={isLoading} type="warning" theme='solid'>撤销</Button>
     <Button isLoading type="tertiary" theme='solid'>加载中</Button>
</FlexRow>`} />
            </Cell>

            <h4>按钮组合</h4>
            <p>可以将多个按钮放入ButtonGroup的容器中。</p>
            <h5>组合尺寸</h5>
            <Cell>
                <FlexRow className='items-center'>
                    <ButtonGroup >
                        {["拷贝", "查询", "剪切"].map((item, index) => <Button key={index} size='large'>{item}</Button>)}
                    </ButtonGroup>
                    <ButtonGroup >
                        {["拷贝", "查询", "剪切"].map((item, index) => <Button key={index} size='medium'>{item}</Button>)}
                    </ButtonGroup>
                    <ButtonGroup >
                        {["拷贝", "查询", "剪切"].map((item, index) => <Button key={index} size='small'>{item}</Button>)}
                    </ButtonGroup>
                </FlexRow>
                <CodeSandBox codeTitle='代码预览' readOnly height='auto' block previewCarde={false} inputCode={`<ButtonGroup >
    {["拷贝", "查询", "剪切"].map((item, index) => <Button key={index} size='large'>{item}</Button>)}
</ButtonGroup>
<ButtonGroup >
    {["拷贝", "查询", "剪切"].map((item, index) => <Button key={index} size='medium'>{item}</Button>)}
</ButtonGroup>
<ButtonGroup >
    {["拷贝", "查询", "剪切"].map((item, index) => <Button key={index} size='small'>{item}</Button>)}
</ButtonGroup>`} />

            </Cell>
            <h5>组合方向</h5>
            <Cell>
                <FlexRow className='flex items-center'>
                    <ButtonGroup column>
                        {["拷贝", "查询", "剪切"].map((item, index) => <Button key={index} size='medium' >{item}</Button>)}
                    </ButtonGroup>

                </FlexRow>
                <CodeSandBox codeTitle='代码预览' readOnly height='auto' block previewCarde={false} inputCode={`<ButtonGroup column>
    {["拷贝", "查询", "剪切"].map((item, index) => <Button key={index} size='medium' >{item}</Button>)}
</ButtonGroup>`} />
            </Cell>
            <h5>组合禁用</h5>
            <Cell>
                <FlexRow className='items-center'>
                    <ButtonGroup >
                        {["拷贝", "查询", "剪切"].map((item, index) => <Button key={index} size='medium' disabled>{item}</Button>)}
                    </ButtonGroup>

                </FlexRow>
                <CodeSandBox codeTitle='代码预览' readOnly height='auto' block previewCarde={false} inputCode={`<ButtonGroup column>
    {["拷贝", "查询", "剪切"].map((item, index) => <Button key={index} size='medium' disabled>{item}</Button>)}
</ButtonGroup>`} />
            </Cell>

            <h5>组合类型</h5>
            <Cell>
                <FlexRow className='items-center gap-x-3'>
                    {["primary", "secondary", "tertiary", "warning", "danger"].map((type, index) => <ButtonGroup key={index}>
                        {["拷贝", "查询", "剪切"].map((item, index) => <Button key={index} size='medium' type={type as ButtonType} >{item}</Button>)}
                    </ButtonGroup>)}
                </FlexRow>
                <CodeSandBox codeTitle='代码预览' readOnly height='auto' block previewCarde={false} inputCode={`["primary", "secondary", "tertiary", "warning", "danger"].map((type, index) => 
<ButtonGroup key={index}>
    {["拷贝", "查询", "剪切"].map((item, index) => 
    <Button key={index} size='medium' type={type as ButtonType} >   
        {item}     
    </Button>)}
</ButtonGroup>)`} />
                <FlexRow className='items-center gap-x-3'>
                    {["primary", "secondary", "tertiary", "warning", "danger"].map((type, index) => <ButtonGroup key={index}>
                        {["昨天", "今天", "明天"].map((item, index) => <Button key={index} size='medium' theme='solid' type={type as ButtonType} >{item}</Button>)}
                    </ButtonGroup>)}

                </FlexRow>
                <CodeSandBox codeTitle='代码预览' readOnly height='auto' block previewCarde={false} inputCode={`["primary", "secondary", "tertiary", "warning", "danger"].map((type, index) => 
<ButtonGroup key={index}>
    {["昨天", "今天", "明天"].map((item, index) => 
    <Button key={index} size='medium' theme='solid' type={type as ButtonType} >
        {item}     
    </Button>)}
</ButtonGroup>)`} />

                <FlexRow className='items-center gap-x-3'>
                    {["primary", "secondary", "tertiary", "warning", "danger"].map((type, index) => <ButtonGroup key={index}>
                        {["上午", "下午"].map((item, index) => <Button key={index} size='medium' theme='outline' type={type as ButtonType} >{item}</Button>)}
                    </ButtonGroup>)}

                </FlexRow>
                <CodeSandBox codeTitle='代码预览' readOnly height='auto' block previewCarde={false} inputCode={`["primary", "secondary", "tertiary", "warning", "danger"].map((type, index) => 
<ButtonGroup key={index}>
    {["上午", "下午"].map((item, index) => 
    <Button key={index} size='medium' theme='outline' type={type as ButtonType} >
        {item}     
    </Button>)}
</ButtonGroup>)`} />
                <FlexRow className='items-center gap-x-3'>
                    {["primary", "secondary", "tertiary", "warning", "danger"].map((type, index) => <ButtonGroup key={index}>
                        {["星期一", "星期二", "星期三", "星期四", "星期五"].map((item, index) => <Button key={index} size='medium' theme='borderless' type={type as ButtonType} >{item}</Button>)}
                    </ButtonGroup>)}

                </FlexRow>
                <CodeSandBox codeTitle='代码预览' readOnly height='auto' block previewCarde={false} inputCode={`["primary", "secondary", "tertiary", "warning", "danger"].map((type, index) => 
<ButtonGroup key={index}>
    {["星期一", "星期二", "星期三", "星期四", "星期五"].map((item, index) =>
     <Button key={index} size='medium' theme='borderless' type={type as ButtonType} >
        {item}     
    </Button>)}
</ButtonGroup>)`} />

            </Cell>
            <h4>PlayGround代码沙盒</h4>
            <p>可以在代码中使用上述所有出现的组件功能</p>
            <CodeSandBox hasChangeButton />
            <a id='bottomAnchor'></a>
        </PageContainer>
    );
};

export default Page;
